<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基本标签</title>
   
</head>
<body>
    <div id="app">
         <!-- 使用 v-cloak 能够解决 插值表达式闪烁的问题 -->
        <p v-cloak >++++++++ {{ msg }} ---------- </p>
        <h4 v-cloak v-text="msg">========</h4>
        <!-- 默认 v-text 是没有闪烁问题的 -->
        <!-- v-text会覆盖元素中原本的内容，但是 插值表达式  只会替换自己的这个占位符，不会把 整个元素的内容清空 -->

        <div>{{msg2}}</div>
        <div v-text="msg2"></div>
        <div v-html="msg2">123123</div>

         <!-- v-bind: 是 Vue中，提供的用于绑定属性的指令 -->
         <input type="button" value="按钮" v-bind:title="mytitle + '123'">

         <input type="button" value="按钮" :title="mytitle + '123'">
         <!-- 注意： v-bind: 指令可以被简写为 :要绑定的属性 -->
         <!-- v-bind 中，可以写合法的JS表达式 -->

        <!-- Vue 中提供了 v-on: 事件绑定机制 -->
        <!-- 注意： v-on: 指令可以被简写为 @要绑定的属性 -->
        <input type="button" value="按钮" :title="mytitle + '123'" v-on:click="alert('hello')">
        <input type="button" value="按钮" @click="show">
    </div>
    
    <script src="./lib/vue-2.4.0.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',

            data:{
                msg:'你好啊，但是大的',
                msg2:'<h1>哈哈，我是一个大大的H1， 我大，我骄傲</h1>',
                mytitle: '这是一个自己定义的title'
            },
            methods:{
               show:function(){
                   alert('Hello');
               } 
            }
        })
    </script>
</body>
</html>
<!-- 1. 如何定义一个基本的Vue代码结构 -->
<!-- 2. 插值表达式 和  v-text   -->
<!-- 3. v-cloak -->
<!-- 4. v-html -->
<!-- 5. v-bind   Vue提供的属性绑定机制   缩写是 : -->
<!-- 6. v-on     Vue提供的事件绑定机制   缩写是 @ -->